import React from 'react'
import {Link} from 'react-router-dom'
import {NavBar,List,Icon,Grid,Card,WhiteSpace,WingBlank,Flex, Button, Toast} from 'antd-mobile';
import Footer from '../../components/Footer/index';
import './index.less'
import axios from '../../axios/index'
const Item = List.Item;
const Brief = Item.Brief;
  const data=[      
    {icon: require(`../../resource/images/grid-1.png`), text: "签到"},
    {icon: require(`../../resource/images/grid-2.png`), text: "话费充值"},
    {icon: require(`../../resource/images/grid-3.png`), text: "服务网点"},
    {icon: require(`../../resource/images/grid-4.png`), text: "咨询服务"}  
  ]
export default class Mine extends React.Component{
    constructor(props) {
        super(props);       
    }
    state={
        userInfo:[],
        isSigned:0,
        checkedInfo:[]
    }
    componentWillMount(){
        
    }
    componentDidMount(){
       this.getUserInfo();
       this.getCheckinTips();    
    }
    getCheckinTips=()=>{
        axios.ajax({
            url:'/api/v1/customer_service/checkin/tips',
            method:'get',
            data:{}
        }).then((res)=>{
            console.log('tips:',res);
            if(res.code===0){
                if(res.data!='' || res.data!=null){                   
                    this.setState({
                        checkedInfo:res.data,
                        isSigned:res.data.today
                    });
                    
                }
            }
            
        });
    }
    getUserInfo=()=>{
        axios.ajax({
            url:'/api/v1/user/info',
            method:'post',
            data:{}
        }).then((res)=>{
            console.log('info:',res);
            if(res.code===0){
                if(res.data!='' || res.data!=null){
                    window.localStorage.userInfo=res.data;
                    this.setState({
                        userInfo:res.data
                    });
                }
            }
            
        });
    }
    handleSwitchTo=(el,index)=>{
        console.log(index);
        if(index === 0){
            this.sign();
        //    this.props.history.push({pathname:'/mine'});
        }else if(index===1){
            this.props.history.push({pathname:'/recharge'});
        }else if(index===2){
            this.props.history.push({pathname:'/amap'});
        }
    }
    sign=()=>{
        axios.ajax({
            url:'/api/v1/customer_service/checkin',
            method:'get',
            data:{}
        }).then((res)=>{
            if(res.code===0){
                Toast.info('签到成功!');
                this.setState({
                    isSigned:true
                });
                this.getCheckinTips();
            }else if(res.code===11400){
                Toast.info('您今日已签到!');
                this.setState({
                    isSigned:true
                });
            }else{
                Toast.info('当前用户不存在!');
            }
        });
    }
    toVas=()=>{
        axios.ajax({
            url:'/api/v1/customer_service/user/passport',
            method:'get',
            data:{
                application:'vas'
            }
        }).then((res)=>{
            if(res.code===15404){
                Toast.info(res.message);
                this.props.history.push('/commonPage');
            }else if(res.code===0){
                this.props.history.push('/equity');
                // this.props.history.push('/commonPage');
            }
        });
    }
    render(){
        return(
            <div style={{marginBottom:'50px'}}>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/main'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >个人中心</NavBar>
            <Card full className="mine-header">
                <WhiteSpace size="lg" />
                <Card.Header
                    title={
                        <div>
                            <span style={{fontSize:'16px',fontWeight:'bolder',color:'white'}}>{this.state.userInfo.weixin_nickname}</span>
                            <div>
                                <Icon type="check-circle" size="xs" style={{verticalAlign:"middle",color:'#ff6600'}}/>
                                <span style={{color:'white'}}>星级会员</span>
                                <Icon type="right" size="xs" style={{verticalAlign:"middle",color:'white'}}/>
                            </div>
                        </div>
                    }                    
                    thumb={require(`../../resource/images/logo.png`)}
                    extra={
                        <span className={this.state.isSigned==0?'sign':'signed'} onClick={this.sign}>
                            <Icon type="check-circle" size="xs" style={{verticalAlign:"middle"}}/>
                            <span>{this.state.isSigned==0?'签到赢奖励':'已签到'}</span>
                        </span>
                    }
                />
            <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Card full={false}>
                        <Card.Header style={{fontSize:'16px'}}
                            title={
                                <div>
                                    <span style={{color:'#3595FF',height:'13px'}}>|</span>
                                    <span style={{fontSize:'12px',color:'#666666'}}>我的成长值</span>
                                </div>
                            }
                            extra={<a href="#" onClick={()=>{this.props.history.push({pathname:'/growthValue'})}} style={{fontSize:'12px',color:'#666666'}}>详情<Icon type="right" size="xs" style={{verticalAlign:'middle'}}/></a>}
                        />
                        <Card.Body>
                            <div>
                            <Flex style={{textAlign:'center'}}>
                                <Flex.Item>
                                    <span style={{display:"inherit",fontSize:'16px',color:'#FF5C61'}}>{this.state.userInfo.all_account_balance}</span>
                                    <WhiteSpace size="xs" />
                                    <span  style={{fontSize:'12px',color:'#666666'}}>累积成长</span>
                                </Flex.Item>
                                <Flex.Item>
                                    <span style={{display:"inherit",fontSize:'16px',color:'#8BC34A'}}>{this.state.userInfo.consumed_account_balance}</span>
                                    <WhiteSpace size="xs" />
                                    <span  style={{fontSize:'12px',color:'#666666'}}>累积消费</span>
                                </Flex.Item>
                                <Flex.Item>
                                    <span style={{display:"inherit",fontSize:'16px',color:'#FF9800'}}>{this.state.userInfo.account_balance}</span>
                                    <WhiteSpace size="xs" />
                                    <span style={{fontSize:'12px',color:'#666666'}}>当前余额</span>
                                </Flex.Item>
                            </Flex>
                            </div>
                        </Card.Body>
                    </Card>
                </WingBlank>
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <Grid className="mine-header-grid" data={data} hasLine={false}
                     onClick={this.handleSwitchTo}    
                >                                
                </Grid>
            </Card>
            <div>
                <WhiteSpace />
                    <List>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                        arrow="horizontal"
                        onClick={this.toVas}
                        >我的权益</Item>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                       客服电话
                        </Item>
                        <Item
                        thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        帮助中心
                        </Item>
                    </List>
                </div>
                <div>
                <WhiteSpace />
                    <List renderHeader={() => '我的任务'} className="mine-list2">
                        <Item
                            extra={<span style={{color:'#ff6622'}}>{this.state.checkedInfo.current}</span>}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {
                                this.props.history.push('/checkinRecord');
                            }}
                        >
                        每日签到 <Brief>{this.state.checkedInfo.next}</Brief>
                        </Item>
                        <Item
                            extra={<span style={{color:'#ff6622'}}>已邀请2人</span>}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {}}
                        >
                        邀请好友 <Brief>再邀请1人，获取100成长值</Brief>
                        </Item>  
                        <Item
                            extra={'待完成'}
                            thumb={require('../../resource/images/logo.png')} 
                            multipleLine
                            onClick={() => {}}
                        >
                        完善资料 <Brief>完善资料，获取50成长值</Brief>
                        </Item> 
                        <Item
                            extra={(this.state.userInfo.phone=='' || this.state.userInfo.phone==undefined)?'待完成':'已绑定'}
                            thumb={require('../../resource/images/logo.png')}  
                            multipleLine
                            onClick={() => {}}
                        >
                        绑定手机 <Brief>绑定手机，免费领取意外险</Brief>
                        </Item>       
                    </List>
                </div>
                
                <Footer selectTab='mine'/>
            </div>
        );
    }
}